<template>
  <view class="container">
    <view class="order-list">
      <view class="order-item" v-for="(order, index) in orders" :key="index">
        <view class="order-info">
          <view class="header">
            <text class="order-title">{{ order.title }}</text>
            <view class="order-status">{{ order.status }}</view>
          </view>
          <text class="order-time">上门时间：{{ order.time }}</text>
          <text class="order-address">服务地址：{{ order.address }}</text>
          <view class="order-distance">
            <text>服务地点距离: {{ order.distance }}km</text>
            <navigator url="/pages/location/location" class="map-link">查看地图</navigator>
          </view>
        </view>
        <view class="order-action">
          <text class="order-price">已支付：<text class="price">{{ order.price }}</text></text>
          <button class="order-btn" @click="grabOrder(order)">立即抢单</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        {
          title: "修补漏水",
          time: "2023-02-15 09:00",
          address: "天津市河西区永安道49号安信公寓1-302",
          distance: 10.2,
          price: "¥0.00",
          status: "待接单"
        },
        {
          title: "修补漏水",
          time: "2023-02-15 09:00",
          address: "天津市河西区永安道49号安信公寓1-302",
          distance: 10.2,
          price: "¥0.00",
          status: "待接单"
        }
      ]
    };
  },
  methods: {
    grabOrder(order) {
      uni.showToast({
        title: '抢单成功！',
        icon: 'success'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 15px;
  background-color: #f7f7f7;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.order-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.order-status {
  background-color: #e0f7fa;
  color: #007bff;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.order-time,
.order-address,
.order-distance {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.map-link {
  color: #007bff;
  text-decoration: underline;
}

.order-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.order-price {
  font-size: 16px;
}

.price {
  color: #ff4d4f;
  font-weight: bold;
}

.order-btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.order-btn:hover {
  background-color: #0056b3;
}
</style>
